import React, { useState ,useEffect,SetStateAction} from "react";

import ImgCard from "../../components/ImgCard";
import WaterFall from "../../components/WaterFall";
import styles from './index.module.css';
import Search from "components/Search";
import Channel from "components/Channel";
import SafeguardRow from "components/SafeguardRow";
import Wrapper from "components/Wrapper";
import {GetArr} from './listData'

const list =[{
  iconSrc:  "https://cdn.weipaitang.com/sky/common/houtaitp/image/20211118/85bb79f75eb3496494b651f0ac0aaeb8-W212H212",
  title: '拍卖行',
  path: '/'
},
{
  iconSrc:  "https://cdn.weipaitang.com/sky/common/houtaitp/image/20211118/6a40c4f071cf4b24aac67538be3639fe-W212H212",
  title: '众筹',
  path: '/'
},{
  iconSrc:  "https://cdn.weipaitang.com/sky/common/houtaitp/image/20211118/38b7d5e9729141bca2db899bae6cdfd7-W212H212",
  title: '直播',
  path: '/'
},{
  iconSrc:  "https://cdn.weipaitang.com/sky/common/houtaitp/image/20211118/0fd1833a7d9b4ba8ace73473f28231dc-W212H212",
  title: '鉴宝',
  path: '/'
}]
const mainData={
  d1:"1000万消费保障",
  d2:'7天无理由退货',
  d3:'30秒极速响应'
}
const Home = () => {
  const [dataList,setDatalist] = useState<GetArr[]>([]);
  // useEffect(()=>{
  //   const arr:GetArr[] = [];
  //   fetch("https://api.weipaitang.com/wechat/v1.0/discovery/get-data?__uuri=&_h=uw1%3DkDM6R2TCpXYFVzalpkUsR1drZkVOh2VSRFbFFmROZ1UoKZ&_a=247_578_1645234947&start=&page=4&direct=r&num=90&screen=1920_1080&isNewUI=1")
  //   .then(res=>res.json())
  //   .then(data=>{
  //     console.log(data.data.list)
  //     const { list } = data.data;
  //     list.forEach((item:any) => {
  //       const { cover='', title='' } = item;
  //     })
  //     setDatalist(arr);
  //   })
  // },[])
  const handleLoadImgs = (entries:any) => {
    if (entries[0].isIntersecting) {
      const arr:GetArr[] = [];
      fetch("https://api.weipaitang.com/wechat/v1.0/discovery/get-data?__uuri=&_h=uw1%3DkDM6R2TCpXYFVzalpkUsR1drZkVOh2VSRFbFFmROZ1UoKZ&_a=247_578_1645234947&start=&page=4&direct=r&num=90&screen=1920_1080&isNewUI=1")
      .then(res=>res.json())
      .then(data=>{
        console.log(data.data.list)
        const { list } = data.data;
        list.forEach((item:any) => {
          const { cover='', title='' ,uri=''} = item;
          arr.push({title: title, src: cover,uri:uri});
        })
        const newImgList = [...dataList, ...arr];
        setDatalist(newImgList);
      })
      
    }
  }
  return (
    <div className={styles['page-home']}>
      <Search></Search>
      <Channel channelSource={list}/>
      <SafeguardRow main={mainData}/>
      <Wrapper></Wrapper>
      <WaterFall
        lineNo={2}
        el="#observer-target-el"
        callback={handleLoadImgs}
        dataSource={dataList}
      />
      <div id="observer-target-el">别拉了，我是有底线的。</div>
    </div>
  );
};

export default Home;
